<template>
    <div class="common onePlusTrainingManage">
        <innerCommon :location="location">
            <div slot="left">
                <span>培训列表</span>
                <a-select @change="handleChange" :allowClear="true" placeholder="状态" style='width:250px;margin-right:10px'>
                    <a-select-option 
                        :value="item.value" 
                        v-for="(item,index) in statusList" 
                        :key="index">
                        {{item.name}}
                    </a-select-option>
                </a-select>
                <a-input-search class="inputStyle" placeholder="请输入活动名称"  v-model="searchValue" enter-button @search="onSearch" />
            </div>
            <div slot="right">
                <a-button type="primary" @click="openAdd()">新增</a-button>
            </div>
            <div slot="table">
                <a-table 
                    size="middle"
                    :columns="columns" 
                    :data-source="list" 
                    :pagination="pagination"
                    :rowKey="record=>record.id"
                    @change="changePage"
                    :locale="{'emptyText': '暂无数据'}"
                    bordered>
                    <div slot="examType" slot-scope="index,record">
                        <span v-if="record.examType==0">理论考试</span>  
                        <span v-else-if="record.examType==1">实操考试</span>  
                        <span v-else>理论+实操</span>
                    </div> 
                    <div slot="invigilatorConfirms" slot-scope="index,record">
                        <span v-if="record.invigilatorConfirms.length>0">
                            <a-tag v-for="(item,index) in record.invigilatorConfirms" :key="index">{{item.realname}}</a-tag>
                        </span>
                        <span v-else>无</span>    
                    </div> 
                    <div slot="creator" slot-scope="index,record">
                        <a-tag v-for="(item,index) in record.invigilatorConfirms" :key="index">{{item.realname}}</a-tag>
                    </div>
                    <div slot="status" slot-scope="index,record">
                        <span v-if="record.status==0" style="color:orange">未开始</span>
                        <span v-else-if="record.status==1" style="color:green">进行中</span>
                        <span v-else style="color:gray">已结束</span>
                    </div>
                    <div slot="action" slot-scope="index,record" class="tableAction">
                        <span @click="edit(record.id)">修改</span>
                        <confirmBox
                            @handleOk="deleteActive(record.id)"
                            :typeName="'删除'"
                            :noticeInfo="record.title"
                            :noticeType="'活动'"
                        ></confirmBox>
                        <span @click="stayTop(record.id,record.stayAtTop)">{{record.stayAtTop==0?'置顶':"取消置顶"}}</span>
                        <span @click="searchJoined(record.id)">报名查看</span>
                        <span @click="assignInvigilator(record.id)">分配监考员</span>
                        <span @click="downloadCert(record)">成绩查看</span>
                    </div>
                </a-table>
            </div>
        </innerCommon>
        <!-- 分配监考员 -->
        <invigilatorModal
            type="2"
            v-if="invigilatorModal"
            :invigilatorModal="invigilatorModal"
            @cancel="invigilatorModal=false"
            :examId="trainingId"
        ></invigilatorModal>
    </div>
</template>
<script>
const columns=[
    {
        title: '序号',
        dataIndex: 'index',
        width:70
    },{
        title: '培训活动名称',
        dataIndex: 'title',
    },{
        title: '开始时间',
        dataIndex: 'startTime',
    },{
        title: '结束时间',
        dataIndex: 'endTime',
    },{
        title: '申请人数',
        dataIndex: 'applyNum',
    },{
        title: '报名成功人数',
        dataIndex: 'joinedNum',
    },{
        title: '监考员',
        scopedSlots: { customRender: 'creator' },
        width:200
    },{
        title: '活动状态',
        scopedSlots: { customRender: 'status' },
    },{
        title: '操作',
        scopedSlots: { customRender: 'action' },
        width:380
    }
]
import {
    getOnePlusTrainingListApi,
    deleteActiveApi,
    onePlusTrainingStayAtTopApi
} from "@/request/api"
import innerCommon from '@/components/common/innerCommon'
import confirmBox from '@/components/common/confirmBox'
import invigilatorModal from '@/components/common/invigilatorModal'
import moment from "moment"
export default {
    name:"examineeManage",
    components:{innerCommon,confirmBox,invigilatorModal},
    watch:{
        searchValue:function(val){
            this.searchValue=val.trim()
        }
    },
    created(){
        if(this.$route.query.page){
            this.searchInfo.page=this.$route.query.page
            this.pagination.current=this.$route.query.page
        }
        this.location=[
            {name:'1+X管理',path:''},{name:'培训管理',path:''}
        ]
        this.init()
    },
    data(){
        return{
            list:[],
            columns,
            location:[],
            topList:[
                {
                    name:"已有考试计划",
                    id:1
                },{
                    name:'待审核考试计划',
                    id:0
                }
            ],
            pagination:{total:0,pageSize:10,current:1},
            searchInfo:{
                keyword:'',
                page:1,
                pageSize:10,
                status:''
            },
            searchValue:'',
            statusList:[{name:"未开始",value:0},{name:'进行中',value:1},{name:"已结束",value:2}],
            invigilatorModal:false,
            trainingId:null
        }
    },
    methods:{
        moment,
        init(){
            this.getToken(getOnePlusTrainingListApi,this.searchInfo,res=>{
                this.list=res.data.rows.map((item,index)=>({...item,'index':(this.searchInfo.page-1)*10+index+1}))
                this.pagination.total=res.data.count
            })
        },
        onSearch(data){
            this.searchInfo.keyword=data.trim()
            this.init()
        },
        changePage(data){
            this.searchInfo.page=data.current
            this.pagination.current=data.current
            this.init()
        },
        handleChange(data){
            this.searchInfo.status=data
            this.init()
        },
        // 打开新增框
        openAdd(){
            this.$router.push({path:'/onePlusTrainingAdd'})
        },
        // 打开修改框
        edit(data){
            this.$router.push({path:'/onePlusTrainingAdd',query:{data}})
        },
        // 删除考试
        deleteActive(data){
            this.getToken(deleteActiveApi,{'trainingId':data},res=>{
                this.$message.success(res.message)
                this.init()
            })
        },
        // 查看报名
        searchJoined(id){
            this.$router.push({path:'/viewOnePlusSign',query:{trainingId:id}})
        },
        // 分配监考员
        assignInvigilator(data){
            this.trainingId=data
            this.invigilatorModal=true
        },
        // 成绩导入
        downloadCert(data){
            this.$router.push({path:"/onePlusTrainingRecord",query:{id:data.id,'type':data.type,name:data.title,page:this.searchInfo.page}})
        },
        //置顶
        stayTop(id,type){
            this.getToken(onePlusTrainingStayAtTopApi,{'trainingId':id,'stayAtTop':type==0?1:0},res=>{
                this.$message.success(res.message)
                this.init()
            })
        }
    }
}
</script>
